<template>
  <div class="plphb">
    <p>
      电影热评榜
    </p>
    <p>评论数</p>
  </div>
  <div v-for="(d,index) in tableData" v-bind:key="index" class="col" @click="a(d.name)">
    <div class="img"><img :src="d.url" :alt="d.name" width="100%" height="100%"></div>
    <div class="name" :title="d.name">{{ d.name }}</div>
    <div class="number" :title="d.sum">{{ d.sum }}</div>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  components: {}, data() {
    return {
      tableData: []
    }
  }, mounted() {
    axios.get('/api/file/getRPB', { headers: { Authorization: localStorage.getItem('token') } }).then(
      (res) => {
        this.tableData = res.data.data
      })
  }, methods: {
    a(n) {

      window.open('/pn/?pa=' + encodeURIComponent(n), '_blank')

    }
  }
}
</script>

<style scoped>
.plphb {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
}

.plphb p {
  cursor: default;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 10px;
}

.img {
  width: 25px;
  height: 30px;
  margin-left: 20px;
  display: block;
}

.number {
  margin-left: 5%;
  text-align: right;
  display: block;
  width: 55px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 5px;
}

.name {
  margin-left: 5%;
  width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  padding-top: 5px;

}

.col {
  cursor: pointer;

  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  margin-bottom: 15px;
  font-size: 13px;
}
</style>